<template>
  <div class="table">
    <el-button @click="add()">添加</el-button>
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="uname" label="用户名" width="100" />
      <el-table-column prop="pwd" label="密码" width="100" />
    </el-table>

    <el-dialog title="用户新增" :visible.sync="dialogFormVisible" @close="close()">

      <el-form v-model="user">
        <!--<el-form-item label="用户编号" :label-width="formLabelWidth">-->
          <!--<el-input v-model="user.id" autocomplete="off" />-->
        <!--</el-form-item>-->
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="user.uname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="user.pwd" autocomplete="off" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="ok()">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'List',
    data() {
      return {
        tableData: [
          {
            id: 0,
            uname: '',
            pwd: '',
          }
        ],
        user: {
          id: 0,
          uname: '',
          pwd: '',
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
        centerDialogVisible: false
      }
    },
    created: function() {
      this.GetPhoneInfo()
    },
    methods: {
      add() {
        this.dialogFormVisible = true
      },
      ok() {
        console.log(this.phone)
          this.$http.post('user/insert', this.user)
            .then(res => {
              console.log(res)
              this.dialogFormVisible = false
              this.GetPhoneInfo()
            }).catch()
      },
      cancel(res) {
        // 关闭弹窗
        this.dialogFormVisible = false
        this.user = {}
        console.log(res)
      },
      GetPhoneInfo() {
        const constinfo = this.$http
          .get('user/ulist')
          .then(tm => {
            this.tableData = tm.data.data
          })
          .catch(error => {
            console.log(error)
          })
      },
      close(){
        //关闭窗体重置表单
        this.user={}
      },
    }
  }
</script>

<style scoped>

</style>
